<template>
<div class="management-platform-add views-container">
    <div class="wlm-form">
        <div class="wlm-form-header">添加平台</div>
        <div class="wlm-form-content">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                <el-form-item label="平台名称" prop="name">
                    <el-input v-model="formFormatData.formData.name" placeholder="请输入平台名称">
                    </el-input>
                </el-form-item>
                <el-form-item label="平台区域" class="city" >
                    <div class="flex-row flex-align-c">
                        <city-select :config="initCityList" ref="cityselect" :changeEvt="formFormatFiltersChange"></city-select>
                    </div>
                </el-form-item>
                <el-form-item label="平台时间" prop="endtime">
                    <el-date-picker v-model="formFormatData.formData.endtime" type="date" align="right" value-format="timestamp" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="{'disabledDate':disabledDate}" :default-value="new Date()">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="所在用户">
                    <chooseUser :config="initChooseUser" ref="chooseUser" :changeEvt="userChange"></chooseUser>
                    <div class="form-help" v-if="isChooseUser">添加平台对应的用户</div>
                </el-form-item>
                <!-- <el-form-item label="选择产品" prop="product">
          <el-select v-model="formFormatData.formData.product" placeholder="请选择" @change="choosePackage">
            <el-option v-for="item in productOptions" :key="item.product_id" :label="item.title" :value="item.product_id">
            </el-option>
          </el-select>
        </el-form-item> -->
                <!-- <el-form-item v-if="packageOptions.length>0" label="选择套餐" prop="package">
          <el-select v-model="formFormatData.formData.package" placeholder="请选择">
            <el-option v-for="item in packageOptions" :key="item.value" :label="item.title" :value="item.package">
            </el-option>
          </el-select>
        </el-form-item> -->
                <el-form-item label="授权渠道">
                    <el-checkbox v-for="(item,index) in formFormatData.formData.power.totalChanel" :key="index" v-model="item.open">{{item.value}}</el-checkbox>
                </el-form-item>
                <el-form-item label="授权应用">
                    <el-checkbox v-for="(item,index) in formFormatData.formData.power.totalPlugins" :key="index" v-model="item.open">{{item.value}}</el-checkbox>
                </el-form-item>
                <el-form-item label="授权版权">
                    <el-radio-group v-model="formFormatData.formData.is_copyright">
                        <el-radio :label="0">默认版权</el-radio>
                        <el-radio :label="1">自定义版权</el-radio>
                    </el-radio-group>
                </el-form-item>
                 <el-form-item label="存储方式">
                    <el-radio-group v-model="formFormatData.formData.is_storage">
                        <el-radio :label="1">系统设置</el-radio>
                        <el-radio :label="2">单独设置</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="" v-if="formFormatData.formData.is_storage==1">
                   <el-radio-group v-model="formFormatData.formData.storage">
                   
                    <el-radio label="local">本地存储</el-radio>
                    <el-radio label="aliyun">阿里云OSS</el-radio>
                    <el-radio label="qiniu">七牛云存储</el-radio>
                    <el-radio label="qcloud">腾讯COS</el-radio>
                    <el-radio label="default">默认</el-radio>
                  </el-radio-group>
                </el-form-item>
                  
                 <!-- <el-form-item label="显示系统信息">
                    <el-radio-group v-model="formFormatData.formData.is_system">
                        <el-radio :label="1">显示</el-radio>
                        <el-radio :label="2">不显示</el-radio>
                    </el-radio-group>
                </el-form-item> -->
            </el-form>
        </div>
    </div>

    <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" type="primary" @click="formFormatConfirm">保存</el-button>
        <router-link tag="span" to="/platform/managementPlatform">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
</div>
</template>

<script>
import {
  platformEditData,
  platformProduct,
  platformPackage,
  platformChangeData,
  applicationChannel,
} from '@/api/platform'
import CitySelect from '@/components/CitySelect/index'
import mixins from '@/mixins/mixins'
import ChooseUser from '@/components/ChooseUser/index' // Waves directive
export default {
  mixins: [mixins.getters('Form')],
  name: 'ManagementPlatformAdd',
  components: {
    ChooseUser,
    CitySelect
  },
  directives: {

  },
  data() {
    var checkAddress = (rule, value, callback) => {
      if ((this.formFormatData.formData.province === '') || (this.formFormatData.formData.city === '') || (this.formFormatData.formData.area === '')) {
        return callback(new Error('请选择平台区域'))
      } else {
        callback()
      }
    }
    var checkTime = (rule, value, callback) => {
      if (this.formFormatData.formData.endtime === '') {
        return callback(new Error('请选择平台时间'))
      } else {
        callback()
      }
    }
    var checkNickname = (rule, value, callback) => {
      if (this.formFormatData.formData.uid === '') {
        return callback(new Error('请选择所在用户'))
      } else {
        callback()
      }
    }
    var checkProduct = (rule, value, callback) => {
      if (this.formFormatData.formData.product === '') {
        return callback(new Error('请选择产品'))
      } else {
        callback()
      }
    }

    var checkPackage = (rule, value, callback) => {
      if (this.formFormatData.formData.package === '') {
        return callback(new Error('请选择套餐'))
      } else {
        callback()
      }
    }
    return {
      isChooseUser: true,
      productOptions: [],
      packageOptions: [],
      initCityList: {
        initList: [],
        bindKey: { key: [{ 'name': 'prce', type: 'String' }, { 'name': 'city', type: 'String' }, { 'name': 'area', type: 'String' }], model: 'address' }
      },
      initChooseUser: {
        closable: true,
        initList: []
      },
      formFormatData: {
        key: 'userForm',
        api: {
          // editForm
          editForm: {
            api: platformEditData,
            params: {
              id: ''
            },
            filters: {
              address: {
                bindInit: ['initCityList']
              }
            }
          },
          submitForm: platformChangeData
        },
        formData: {
          name: '',
          user_name: '',
          uid: '',
          prce: {},
          city: {},
          area: {},
          endtime: '',
          is_copyright: 0,
          storage:'default',
          is_storage:1,
          is_system: 2,
          product: '',
          package: '',
          power: {
            totalChanel: {},
            totalPlugins: {}
          }
        },
        rules: {
          name: [{
            required: true,
            message: '请输入平台名称',
            trigger: 'blur'
          }],
          address: [{
            required: true,
            validator: checkAddress,
            trigger: 'blur'
          }],
          endtime: [{
            required: true,
            validator: checkTime,
            trigger: 'blur'
          }],
          uid: [{
            required: true,
            validator: checkNickname,
            trigger: 'blur'
          }],
          product: [{
            required: true,
            validator: checkProduct,
            trigger: 'blur'
          }],
          package: [{
            required: true,
            validator: checkPackage,
            trigger: 'blur'
          }]
        }
      }
    }
  },
  created() {
    const { redirect = null, uid = null, nickname = '' } = this.$route.query
    if (redirect === 'useradd') {
      this.initChooseUser.initList = [{ user_id: uid, nickName: nickname }]
      this.formFormatData.formData.uid = uid
      this.$store.dispatch('setRedirect', redirect)
      this.isChooseUser = false
    }
    if (!this.isFormEdit) {
      this.getstoreMenu()
    }
  },
  methods: {
    getstoreMenu() {
      applicationChannel().then(res => {
        console.log("99ssss99++++",res)
        const { data: { totalChanel, totalPlugins } } = res.data || {}
        this.formFormatData.formData.power.totalChanel = totalChanel
        this.formFormatData.formData.power.totalPlugins = totalPlugins
      })
    },
    formFormatConfirm() {
      this.formFormatSubmit({ router: { type: 'replace', path: '/platform/managementPlatform', code: 1 } })
    },
    formFormatCallBack(data, type) {
      if (type === 'editForm') {
        const { user_name, uid, endtime } = data
        if (uid) {
          this.initChooseUser.initList = [{ user_id: uid, nickName: user_name }]
          this.formFormatData.formData.uid = uid
        }
        this.formFormatData.formData.endtime = endtime * 1000
        // this.choosePackage()
      }
    },
    getProduct() {
      platformProduct().then((response) => {
        const {
          data: {
            data: productData = []
          } = {}
        } = response
        this.productOptions = productData
      })
    },
    disabledDate(time) {
      return new Date(time).getTime() < new Date().getTime()
    },
    choosePackage() {
      const product_id = this.formFormatData.formData.product
      if (product_id !== '') {
        platformPackage({
          product_id
        }).then((response) => {
          const {
            data: {
              data: packageData = []
            } = {}
          } = response
          this.packageOptions = packageData
        })
      }
    },
    userChange(userlist) {
      console.log('userlist,', userlist)
      if (userlist.length > 0) {
        const [{
          user_id
        }] = [...userlist]
        this.formFormatData.formData.uid = user_id
      } else {
        this.formFormatData.formData.uid = ''
      }
    },
    chooseCity(address) {
      const [province, city, area] = address
      this.formFormatData.formData.province = [province]
      this.formFormatData.formData.city = [city]
      this.formFormatData.formData.area = [area]
    }
  }
}
</script>

<style lang="scss" scoped>
.el-checkbox+.el-checkbox {
    margin-left: 0;
}

.el-checkbox {
    margin-right: 30px;
}
</style>
